<template>
  <div>
    <el-main>
      <!-- 回到顶部 -->
      <div class="page">
        <el-backtop
          :right="100"
          :bottom="100"
          :visibility-height="5"
          target=".el-main"
          ref="backtoback"
        />
        <el-pagination
          v-model:currentPage="pages"
          v-model:page-size="limits"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  props: { total: Number, limit: Number, page: Number },
  emits: ["changeLimit", "changePage"],
  data() {
    return {
      limits: this.limit, //每页的数据条数
      pages: this.page, //默认开始页面
    };
  },
  watch: {
    limits() {
      this.$nextTick(() => {
        this.$emit("changeLimit", this.limits);
      });
    },
    pages() {
      this.$emit("changePage", this.pages);
      //判断是否有这个属性
      if (this.$refs.backtoback.$el.data != "v-if") {
        this.$nextTick(() => {
          this.$refs.backtoback.$el.click(); //自己调用自己点击回到顶部的方法
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 0px;
  padding: 0px;
}
.page {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
}
</style>
